<template>
  <Header @get-instance="getInstanceFromTopBar"/>
  <a-row style="margin-top: 102px;">
    <a-col :span="3">
      <!--侧边导航栏-->
      <a-menu v-model:selectedKeys="currentLeve1" theme="light" mode="inline">
        <a-menu-item key="1">
          <MailOutlined />
          <span>我的消息</span>
        </a-menu-item>
        <a-menu-item key="2">
          <CommentOutlined />
          <span>回复我的</span>
        </a-menu-item>
        <a-menu-item key="3">
          <LikeOutlined />
          <span>收到的赞</span>
        </a-menu-item>
      </a-menu>
    </a-col>

    <a-col :span="21">
      <div style="text-align: left">
        <router-view :userSession="session"/>
      </div>
    </a-col>
  </a-row>
</template>

<script setup>
import Header from "@/components/common/TopBar.vue";
import {ref, watch, onBeforeMount, nextTick} from "vue";
import {MailOutlined, CommentOutlined, LikeOutlined} from "@ant-design/icons-vue";
import router from "@/router/index.js";

const currentLeve1 = ref(['1']);

const session = ref({});

watch(currentLeve1, (val) => {
  if(val[0] === '1') {
    router.push('/message-center/own')
  }
  if(val[0] === '2') {
    router.push('/message-center/reply')
  }
  if(val[0] === '3') {
    router.push('/message-center/like')
  }
});

function getInstanceFromTopBar(instance) {
  session.value = instance.session;
}

onBeforeMount(() => {
  const type = router.currentRoute.value.href.split('/')[2];
  if(type === 'own') {
    currentLeve1.value = ['1'];
  }
  if(type === 'reply') {
    currentLeve1.value = ['2'];
  }
  if(type === 'like') {
    currentLeve1.value = ['3'];
  }
  if(typeof type === 'undefined') {
    router.push('/message-center/own');
  }
});

</script>

<style scoped>

</style>